<template>
    <div class="huaxian_wp">
        <div class="tab_title">
            <span>画线单</span>
            <i class="iconfonMy icon-guanbi" @click="ipcRenderer.send('close-huaxianlist')"></i>
        </div>
        <el-table :data="list" style="
        background-color: #f1f8ff;
                border: 1px solid #979ba2;
               width:calc(100% - 16px);margin: 8px;
              " :height="288" size="small" border>
            <el-table-column show-overflow-tooltip prop="time" label="创建时间" width="130"></el-table-column>
            <el-table-column show-overflow-tooltip label="状态" width="40">
                <template #default="scope">
                    <div v-if="scope.row.state == 1">运行</div>
                    <div v-if="scope.row.state == 2">暂停</div>
                    <div v-if="scope.row.state == 3">结束</div>
                </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="heyue_name" label="品种" width="100"></el-table-column>
            <el-table-column show-overflow-tooltip prop="heyue_bh" label="合约" width="55"></el-table-column>
            <el-table-column show-overflow-tooltip label="价格" width="100">
                <template #default="scope">
                    <div v-if="scope.row.jiageState == 101" @click="changeJiage(scope, 102)">
                        <button>{{ '>=' + scope.row.price }}</button>
                    </div>
                    <div v-if="scope.row.jiageState == 102" @click="changeJiage(scope, 101)">
                        <button>{{ '<=' + scope.row.price }}</button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="maimai" label="买卖" width="35"></el-table-column>
            <el-table-column show-overflow-tooltip prop="kaiping" label="开平" width="35"></el-table-column>
            <el-table-column show-overflow-tooltip prop="num" label="数量" width="50"></el-table-column>
            <el-table-column show-overflow-tooltip prop="xiutime" label="修改时间" width="130"></el-table-column>
            <el-table-column show-overflow-tooltip prop="xiutime" label="操作">
                <template #default="scope">
                    <div style="display: flex;align-items: center;justify-content: space-between;">
                        <div class="btn" v-if="scope.row.state != 3" @click="caozuo(scope, 1)">运行</div>
                        <div class="btn btn2" v-if="scope.row.state != 3" @click="caozuo(scope, 2)">暂停</div>
                        <!-- <div class="btn btn3" @click="caozuo(scope, 3)">结束</div> -->
                        <div class="btn btn4" @click="caozuo(scope, 4)">删除</div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="btns">
            <button @click="getList">刷新</button>
            <label>
                <input type="radio" v-model="radioVal" value="1">
                未触发
            </label>
            <label>
                <input type="radio" v-model="radioVal" value="2">
                已触发
            </label>
        </div>
        <diao_msg ref="diaoMsg" />
    </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
const { ipcRenderer } = require('electron');
import tiaoJianTxt from '@/utils/tiaojiandan.js'
import diao_msg from '@/components/view_list/diao_msg.vue'

const diaoMsg = ref(null)
const list = ref([])
const radioVal = ref(1)
ipcRenderer.on('huaxianlist_onload', async () => {
    getList()
})
onMounted(() => {
    getList()
})
watch(radioVal, () => {
    getList()
})
function getList() {
    let cont = tiaoJianTxt.readLogs()
    if (cont) {
        let obj = JSON.parse(cont)
        let arr = Object.values(obj)
        arr = arr.map(item => {
            return item ? Object.values(item) : []
        })
        arr = arr.flat()
        list.value = arr.filter(item => item.isCHuFa == radioVal.value)
        return
    }
    list.value = []
}
function changeJiage(v, type) {
    if (radioVal.value == 2) {
        return  diaoMsg.value.open('画线单已经触发不可更改')
    }
    let row = v.row
    let obj = tiaoJianTxt.readLogs()
    if (obj) {
        obj = JSON.parse(obj)
        if (obj[row.heyue_bh] && obj[row.heyue_bh][row.Guid]) {
            obj[row.heyue_bh][row.Guid].jiageState = type
            tiaoJianTxt.writeLog(JSON.stringify(obj))
        }
    }
    list.value[v.$index].jiageState = type
    diaoMsg.value.open('价格方向更改成功！')
}
function caozuo(v, type) {
    let row = v.row
    if (row.state == type) return
    let obj = tiaoJianTxt.readLogs()
    if (obj) {
        obj = JSON.parse(obj)
        if (obj[row.heyue_bh] && obj[row.heyue_bh][row.Guid]) {
            if (type == 4) {
                delete obj[row.heyue_bh][row.Guid]
            } else {
                obj[row.heyue_bh][row.Guid].state = type
            }
            tiaoJianTxt.writeLog(JSON.stringify(obj))
        }
    }
    list.value[v.$index].state = type
    if (type == 4) {
        let huaxian = tiaoJianTxt.readHuaXian()
        if (huaxian) {
            huaxian = JSON.parse(huaxian)
            huaxian.forEach(item => {
                item.Value = item.Value.filter(subItem => {
                    if (subItem.Key == row.Guid) {
                        return false
                    } else {
                        return true
                    }
                });
            });
            tiaoJianTxt.writeHuaXian(JSON.stringify(huaxian))
        }
        list.value.splice(v.$index, 1)
        ipcRenderer.send('right_click_msg', { type: '删除画线', msg: row.Guid })
    }
    diaoMsg.value.open('操作成功！')
}
</script>

<style scoped lang="less">
.huaxian_wp {
    background-color: #f0f0f0;
    color: #000;
    height: 365px;
    width: 845px;
    overflow: hidden;

    .tab_title {
        background-color: #d5d8e6;
        color: #000;
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 30px;
        padding-left: 5px;
        -webkit-app-region: drag;

        i {
            -webkit-app-region: no-drag;
            width: 29px;
            height: 30px;
            text-align: center;
        }

        i:hover {
            background-color: #e61123;
            color: #fff;
        }
    }

    .btn {
        background-color: #0084ff;
        border-radius: 2px;
        color: rgba(255, 255, 255, 0.7);
        display: inline-block;
        line-height: 18px;
        padding: 0 5px;
    }

    .btn2 {
        background-color: #268a2a;
    }

    .btn3 {
        background-color: #ba5c20;
    }

    .btn4 {
        background-color: #e61123;
    }

    .btns {
        padding-top: 3px;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        label {
            display: flex;
            align-items: center;
            margin-right: 12px;
        }

        button {
            position: absolute;
            left: 10px;
            padding: 0 20px;
        }
    }
}

:deep(.el-table th.el-table__cell > .cell),
:deep(.el-table td.el-table__cell div) {
    padding: 0 3px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

:deep(.el-table th.el-table__cell.is-leaf),
:deep(.el-table--enable-row-transition .el-table__body td.el-table__cell) {
    padding: 0;
    color: #000000;
    font-weight: normal;
}

:deep(.el-table th.el-table__cell.is-leaf) {
    background-color: #f0f0f0;
    border-color: #aaaaaa;
}

:deep(.el-table--enable-row-transition .el-table__body td.el-table__cell) {
    background-color: #f1f8ff;
    border-color: #f0f0f0;
}

:deep(.el-table--enable-row-transition .el-table__body td.el-table__cell .cell) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

:deep(.el-scrollbar__bar) {
    display: block !important;
    opacity: 1;
}

:deep(.el-scrollbar__bar.is-horizontal>div) {
    background: #dedfe1;
    opacity: 1;
}

:deep(.el-scrollbar__bar.is-horizontal) {
    height: 5px;
    opacity: 1;
}

:deep(.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar) {
    width: 5px;
    height: 5px;
}

:deep(.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb) {
    background: #dedfe1;
    border-radius: 5px;
    opacity: 1;
}

:deep(.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb:hover) {
    background: #dedfe1;
    opacity: 1;
}

:deep(.current-row .cell) {
    background-color: #9ecee7;
}

:deep(.el-table--border .el-table__cell) {
    background-color: #f1f8ff;
    padding: 0;
}

:deep(.selected-row td.el-table__cell) {
    background-color: #9ecee7 !important;
}
</style>
